<template>
    <div class="fomeMain">
        
        <el-switch
            v-model="enableDetail"
            active-color="#13ce66"
            inactive-color="#ff4949">
            </el-switch>
        <div class="fomeMain_collapse">
            <pro-layout-content-type :activeName="activeNames" contentLayoutType="collapse" :enableNav="false" accordion>
                <pro-layout-content-type-item label="基本信息" name="type1">
                    <el-form :model="form.information" labelWidth="160px" ref="information" :enableDetail="enableDetail">
                        <pro-layout-contaner :columnCount="3">
                            <pro-select key="1" uiType="list" size="mini" label="业务大类" :dataSource="getFromSelectListDataSource" v-model="form.information.value1" prop="value1" :rules="[{ required: true, message: '请选择业务大类', trigger: 'blur' }]" />
                            <pro-select key="2" uiType="list" size="mini" label="业务类别"  :dataSource="getFromSelectListDataSource" v-model="form.information.value2" prop="value2" :rules="[{ required: true, message: '请选择业务类别', trigger: 'blur' }]" />
                            <pro-input key="3" uiType="text" size="mini" label="项目名称"  :dataSource="getFromSelectListDataSource" v-model="form.information.value3" prop="value3" :rules="[{ required: true, message: '请选输入项目名称', trigger: 'blur' }]" />
                            <pro-input key="4" uiType="text" size="mini" label="信托计划名称"  :dataSource="getFromSelectListDataSource" v-model="form.information.value4" prop="value4" />
                            <pro-input key="5" uiType="text" size="mini" label="信托计划简称"  :dataSource="getFromSelectListDataSource" v-model="form.information.value5" prop="value5" />
                            <pro-select key="6" uiType="list" size="mini" label="基础资产类型"  :dataSource="getFromSelectListDataSource" v-model="form.information.value6" prop="value6" />
                            <pro-select key="7" uiType="list" size="mini" label="资金募集方式"  :dataSource="getFromSelectListDataSource" v-model="form.information.value7" prop="value7" />
                            <pro-select key="8" uiType="list" size="mini" label="信托产品性质标识"  :dataSource="getFromSelectListDataSource" v-model="form.information.value8" prop="value8" />
                            <pro-select key="9" uiType="list" size="mini" label="单一集合标识"  :dataSource="getFromSelectListDataSource" v-model="form.information.value9" prop="value9" />
                            <pro-select key="10" uiType="list" size="mini" label="信托功能标识"  :dataSource="getFromSelectListDataSource" v-model="form.information.value10" prop="value10" /> 
                            <pro-select key="11" uiType="list" size="mini" label="信托财产管理方式"  :dataSource="getFromSelectListDataSource" v-model="form.information.value11" prop="value11" />
                            <pro-input key="12" :span="24" size="mini" uiType="textarea" show-word-limit maxlength="200" label="项目概述"  :dataSource="getFromSelectListDataSource" v-model="form.information.value12" prop="value12" />
                        </pro-layout-contaner>
                    </el-form>
                </pro-layout-content-type-item>
                <pro-layout-content-type-item label="项目来源" name="type2">
                    <el-form :model="form.source" labelWidth="160px" ref="source" :enableDetail="enableDetail">
                        <pro-layout-contaner :columnCount="3">
                            <pro-select key="21" uiType="list" size="mini" label="项目来源" :dataSource="getFromSelectListDataSource" v-model="form.source.value1" prop="value1" />
                            <pro-input key="23" uiType="text" size="mini" label="项目推荐机构"  :dataSource="getFromSelectListDataSource" v-model="form.source.value3" prop="value3" />
                        </pro-layout-contaner>
                    </el-form>
                </pro-layout-content-type-item>

                <pro-layout-content-type-item label="组织信息" name="type3">
                    <el-form :model="form.organization" labelWidth="160px" ref="organization" :enableDetail="enableDetail">
                        <pro-layout-contaner :columnCount="3">
                            <pro-input key="31" uiType="text" size="mini" label="信托经理"  :dataSource="getFromSelectListDataSource" v-model="form.organization.value1" prop="value1" />
                            <pro-input key="32" uiType="text" size="mini" label="信托经理电话"  :dataSource="getFromSelectListDataSource" v-model="form.organization.value2" prop="value2" />
                            <pro-input key="33" uiType="text" size="mini" label="部门名称"  :dataSource="getFromSelectListDataSource" v-model="form.organization.value3" prop="value3" />
                            <pro-input key="34" uiType="text" size="mini" label="分管高级管理人员姓名"  :dataSource="getFromSelectListDataSource" v-model="form.organization.value4" prop="value4" />
                            <pro-input key="35" uiType="text" size="mini" label="登记人"  :dataSource="getFromSelectListDataSource" v-model="form.organization.value5" prop="value5" />
                            <pro-input key="36" uiType="text" size="mini" label="登记部门"  :dataSource="getFromSelectListDataSource" v-model="form.organization.value6" prop="value6" />
                            <pro-input key="37" uiType="date" size="mini" type="datetime" label="登记时间"  :dataSource="getFromSelectListDataSource" v-model="form.organization.value7" prop="value7" />
                            <pro-input key="38" uiType="date" size="mini" type="datetime" label="更新时间"  :dataSource="getFromSelectListDataSource" v-model="form.organization.value8" prop="value8" />
                        </pro-layout-contaner>
                    </el-form>
                </pro-layout-content-type-item>
                <pro-layout-content-type-item label="附件信息" name="type4">
                    <el-upload
                        class="enclosure"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :before-upload="beforeAvatarUpload"
                        multiple
                        :show-file-list="false"
                        :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>

                    <pro-data-table :columns="colconfigs" :data="fileList" stripe :enablePagination="false">
                        <template slot="empty">
                            <div style="line-height: 26px;">
                                <img src="./no-files.png" />
                                <div>当前未上传附件</div>
                            </div>
                        </template>
                        

                        <template slot="typeContent" slot-scope="{row, store, column}">
                            <i class="el-icon-document"></i>
                        </template>

                        <template slot="percentageContent" slot-scope="{row, store, column}">
                            <span>{{row.percentage ? row.percentage : 100}}</span>
                        </template>

                        <template slot="actionContent" slot-scope="{row, store, column}">
                            <el-button size="small" type="primary" @click="deleteButton(row, store, column)">删除</el-button>
                        </template>
                    </pro-data-table>
                </pro-layout-content-type-item>
            </pro-layout-content-type>
           
        </div>

        <div class="fomeMain_submit">
            <pro-action shouldConfirmTxt="确定提交吗?" type="primary" @handler="submitForm(form)">确定</pro-action>
            <pro-action @handler="handleClose">取消</pro-action>
        </div>
    </div>
</template>
<script>
    import dataSource from "mars-pro/src/pro/mixins/dataSource/index";
    import {post} from 'mars-pro/src/pro/request';
    import createState from 'mars-pro/src/pro/createState';
    // 模拟测试数据
    function getFromSelectListDataSource(request, response){
        const {query} = request.body
        return  response.$delay(100,{
            list: Array.from({length: 10}).map((r, index) => ({
                label: '选项' + (query ? '('+ query +')': '')  +'-' + index,
                value: 'key' + (query ? '('+ query +')' : '') + '-' + index
            }))
        })
    }
    export default {
        name:"新建项目",
        desc:"新建信托项目表单",
        screenshot:"https://img.alicdn.com/imgextra/i4/O1CN01viScHq1xQC8KtFTIH_!!6000000006437-2-tps-1811-904.png",
        mixins:[
            dataSource('getFromSelectListDataSource', post('/mock/post').mockData(getFromSelectListDataSource), {dataField: 'list'})
        ],
        data(){
            return {
                enableDetail:false,
                activeNames:'type1',
                show2:true,
                //创建也给表单模型model
                form:createState({information:{},source:{},organization:{}}),
                fileList: [],
                colconfigs:[
                    {prop: 'type',label: '文档类别' },
                    {prop: 'name',label: '文件名' },
                    {prop: 'uid',label: '上传人' },
                    {prop: 'percentage',label: '上传进度' },
                    {prop: 'lastModified',label: '上传时间' },
                    {prop: 'action',label: '操作' }
                ]
            }
        },
        methods:{
            handleShow(data){
                this[data] = this[data] ? false : true
            },
            beforeAvatarUpload(file) {
                // 文件数量判断
                const isLt5 = this.fileList.length < 5;
                if(!isLt5){
                    this.$proMessage.error('上传文件数量不能超过5个！')
                }
                // 文件大小判断
                const isLt10M = file.size / 1024 /1024 < 10;
                if(!isLt10M){
                    this.$proMessage.error('上传文件数量不能超过10MB')
                }
                this.fileList.push(file)
                return isLt5 && isLt5
            },
            deleteButton(row, store, column){
                console.log(row, store, column)
                // this.fileList.splice(index,1)
                this.fileList = this.fileList.filter(item => {
                    return item.lastModified != row.lastModified
                })
            },
            submitForm(form){
                let validData = true
                Object.keys(form).forEach(item => {
                     this.$refs[item].validate((valid) => {
                        if (!valid) {
                            validData = false
                            return false;
                        }
                    });
                })
                if(validData){
                    alert('submit')
                }
            },
            handleClose(){
                alert('取消')
            }
        }
    }
</script>
<style lang="scss">
.clearfix{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.enclosure{
    margin-bottom: 20px;
}
.fomeMain{
    height: 100%;
    position: relative;
    padding-bottom: 58px;
    &_collapse{
        height: 100%;
        overflow: auto;
    }
    &_submit{
        height: 48px;
        position: absolute;
        left:0;right:0;bottom:0;
    }
}
</style>